<template>
    <div class="box">
        <p style="font-size:2rem; font-weight:800; margin-bottom:10px">기본 Search Bar</p>
        <div>
            <p style="font-size:1.5rem; font-weight:500; margin-bottom:10px">1번 디자인</p>
            <div>
                <!-- 여기서 부터 복사 -->
                <div class="flex-start">
                    <div class="search-bar flex">
                        <select name="" id="">
                            <option value="all">전체</option>
                        </select>
                        <input type="text" name="" id="">
                    </div>
                    <button class="blue-btn small-btn">검색</button>
                </div>
                <!-- 여기서 부터 복사 -->
                <div class="flex-center">
                    <div class="search-bar flex">
                        <select name="" id="">
                            <option value="all">전체</option>
                        </select>
                        <input type="text" name="" id="">
                    </div>
                    <button class="blue-btn small-btn">검색</button>
                </div>
                <!-- 여기서 부터 복사 -->
                <div class="flex-end">
                    <div class="search-bar flex">
                        <select name="" id="">
                            <option value="all">전체</option>
                        </select>
                        <input type="text" name="" id="">
                    </div>
                    <button class="blue-btn small-btn">검색</button>
                </div>
            </div>
        </div>
        <div>
            <p style="font-size:1.5rem; font-weight:500; margin-bottom:10px">2번 디자인</p>
            <div>
                <!-- 여기서 부터 복사 -->
                <div class="flex-start">
                    <div class="block-searchbar flex">
                        <select name="" id="">
                            <option value="all">전체</option>
                        </select>
                        <input type="text" name="" id="">
                    </div>
                    <button class="blue-btn small-btn">검색</button>
                </div>
                <!-- 여기서 부터 복사 -->
                <div class="flex-center">
                    <div class="block-searchbar flex">
                        <select name="" id="">
                            <option value="all">전체</option>
                        </select>
                        <input type="text" name="" id="">
                    </div>
                    <button class="blue-btn small-btn">검색</button>
                </div>
                <!-- 여기서 부터 복사 -->
                <div class="flex-end">
                    <div class="block-searchbar flex">
                        <select name="" id="">
                            <option value="all">전체</option>
                        </select>
                        <input type="text" name="" id="">
                    </div>
                    <button class="blue-btn small-btn">검색</button>
                </div>
            </div>
        </div>
    </div>
    <div class="box">
        <p style="font-size:2rem; font-weight:800; margin-bottom:10px">날짜 추가 Search Bar</p>
        <div>
            <p style="font-size:1.5rem; font-weight:500; margin-bottom:10px">1번 디자인</p>
            <div>
                <!-- 여기서 부터 복사 -->
                <div class="flex-start">
                    <input type="date" name="" id="" data-placeholder="ex) 2024-01-01">
                    <span class="coupler">~</span>
                    <input type="date" name="" id="" data-placeholder="ex) 2024-01-01">
                    <div class="search-bar flex">
                        <select name="" id="">
                            <option value="all">전체</option>
                        </select>
                        <input type="text" name="" id="">
                    </div>
                    <button class="blue-btn small-btn">검색</button>
                </div>
                <!-- 여기서 부터 복사 -->
                <div class="flex-center">
                    <input type="date" name="" id="" data-placeholder="ex) 2024-01-01">
                    <span class="coupler">~</span>
                    <input type="date" name="" id="" data-placeholder="ex) 2024-01-01">
                    <div class="search-bar flex">
                        <select name="" id="">
                            <option value="all">전체</option>
                        </select>
                        <input type="text" name="" id="">
                    </div>
                    <button class="blue-btn small-btn">검색</button>
                </div>
                <!-- 여기서 부터 복사 -->
                <div class="flex-end">
                    <input type="date" name="" id="" data-placeholder="ex) 2024-01-01">
                    <span class="coupler">~</span>
                    <input type="date" name="" id="" data-placeholder="ex) 2024-01-01">
                    <div class="search-bar flex">
                        <select name="" id="">
                            <option value="all">전체</option>
                        </select>
                        <input type="text" name="" id="">
                    </div>
                    <button class="blue-btn small-btn">검색</button>
                </div>
            </div>
        </div>
        <div>
            <p style="font-size:1.5rem; font-weight:500; margin-bottom:10px">2번 디자인</p>
            <div>
                <!-- 여기서 부터 복사 -->
                <div class="flex-start">
                    <input type="date" name="" id="" data-placeholder="ex) 2024-01-01 ~ 2024-01-04">
                    <div class="block-searchbar flex">
                        <select name="" id="">
                            <option value="all">전체</option>
                        </select>
                        <input type="text" name="" id="">
                    </div>
                    <button class="blue-btn small-btn">검색</button>
                </div>
                <!-- 여기서 부터 복사 -->
                <div class="flex-center">
                    <input type="date" name="" id="" data-placeholder="ex) 2024-01-01 ~ 2024-01-04">
                    <div class="block-searchbar flex">
                        <select name="" id="">
                            <option value="all">전체</option>
                        </select>
                        <input type="text" name="" id="">
                    </div>
                    <button class="blue-btn small-btn">검색</button>
                </div>
                <!-- 여기서 부터 복사 -->
                <div class="flex-end">
                    <input type="date" name="" id="" data-placeholder="ex) 2024-01-01 ~ 2024-01-04">
                    <div class="block-searchbar flex">
                        <select name="" id="">
                            <option value="all">전체</option>
                        </select>
                        <input type="text" name="" id="">
                    </div>
                    <button class="blue-btn small-btn">검색</button>
                </div>
            </div>
        </div>
    </div>
    <div class="box">
        <p style="font-size:2rem; font-weight:800; margin-bottom:10px">체크 조건 추가 Search Bar</p>
        <div>
            <p style="font-size:1.5rem; font-weight:500; margin-bottom:10px">1번 디자인</p>
            <div>
                <!-- 여기서 부터 복사 -->
                <div class="flex-center content">
                    <div>
                        <div class="search-top flex">
                            <input type="date" name="" id="" data-placeholder="ex) 2024-01-01">
                            <div class="search-bar flex">
                                <select name="" id="">
                                    <option value="all">전체</option>
                                </select>
                                <input type="text" name="" id="">
                            </div>
                        </div>
                        <div class="flex">
                            <ul class="input-group flex">
                                <li><label for="">
                                        <input type="checkbox">
                                        <span>남</span>
                                    </label>
                                </li>
                                <li><label for="">
                                        <input type="checkbox">
                                        <span>여</span>
                                    </label>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <button class="blue-btn small-btn">검색</button>
                </div>
                <!-- 여기서 부터 복사 -->
                <div class="flex-center content">
                    <div>
                        <div class="search-top flex">
                            <input type="date" name="" id="" data-placeholder="ex) 2024-01-01">
                            <div class="search-bar flex">
                                <select name="" id="">
                                    <option value="all">전체</option>
                                </select>
                                <input type="text" name="" id="">
                            </div>
                        </div>
                        <div class="flex">
                            <ul class="input-group flex">
                                <li>성별 : </li>
                                <li class="input-container">
                                    <label for="male">
                                        <input type="radio" id="male" name="gender" class="custom-radiobox">
                                        <span>남</span>
                                    </label>
                                </li>
                                <li class="input-container">
                                    <label for="female">
                                        <input type="radio" id="female" name="gender" class="custom-radiobox">
                                        <span>여</span>
                                    </label>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <button class="blue-btn small-btn">검색</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
        }
    },
    methods: {

    },
    watch: {

    },
    computed: {

    },
    components: {
    },
    mounted() {
        console.log('main mounted');
    }
}
</script>

<style scoped>
/* */
.box {
    padding: 50px;
    border: 1px solid #eee;
    margin-bottom: 30px;
}




/* 1-1디자인 */
.search-bar {
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #fff;
    margin-left: 5px;
}

.search-bar select,
.search-bar input[type="text"] {
    border: none;
}


/* 3-1디자인 */

.search-top {
    margin-bottom: 10px;
}




/* radio css */
.input-container label {
    display: flex;
    cursor: pointer;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    margin-bottom: 3px;
}

.input-container label input.custom-radiobox {
    position: absolute;
    left: -9999px;
}

.input-container label input.custom-radiobox:checked+span {
    background-color: #5b72b8;
    color: #fff;
}

.input-container label input.custom-radiobox:checked+span:before {
    box-shadow: inset 0 0 0 4px #213f99;
}

.input-container label span {
    display: flex;
    align-items: center;
    padding: 3px 7px 3px 3px;
    border-radius: 10px;
    transition: 0.25s ease;
    color: #414181;
}

.input-container label span:hover {
    background-color: #d6d6e5;
}

.input-container label span:before {
    display: flex;
    flex-shrink: 0;
    content: "";
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-right: 3px;
    transition: 0.25s ease;
    box-shadow: inset 0 0 0 1px #213f99;
}
</style>